<template>
  <div class="joinCf">
    <header-tit :title="'加入会议'"></header-tit>
    <div class="content">
      <div class="cfNumber  flex-start">
        <div class="key necessity">会议号</div>
        <input type="text" :class="[code_error_msg ? 'error' : '']" v-model.trim="cf_code" @input="inputCfNumber"/>
        <div class="errormsg">{{ code_error_msg }}</div>
      </div>
      <div class="joinCfSetting clearfix">
        <div class="key fl">入会选项</div>
        <div class="valueBox fl">
          <div class="item flex-start">
            <el-checkbox v-model="voiced"></el-checkbox>
            <span class="valuetext">入会开启麦克风</span>
          </div>
          <div class="item flex-start">
            <el-checkbox v-model="camera"></el-checkbox>
            <span class="valuetext">入会开启摄像头</span>
          </div>
        </div>
      </div>
    </div>
    <div class="joinBtn flex-center cp" @click="joinCf">确定</div>
    <cf-password-dialog ref="cfPasswordDialog"></cf-password-dialog>
  </div>
</template>

<script>
import cfPasswordDialog from './components/cfPasswordDialog'
import headerTit from '../headerTit'
import { sendSock } from '../../../../utils/socketSend'
export default {
  components: {
    headerTit, cfPasswordDialog
  },
  data () {
    return {
    }
  },
  computed: {
    // 会议号
    cf_code: {
      get () {
        return this.$store.state.conference.joinCfData.cf_code
      },
      set (val) {
        this.$store.commit('conference/set_joinCfData_cf_code', val)
      }
    },
    // 会议号下方错误提示
    code_error_msg () {
      return this.$store.state.conference.joinCfData.code_error_msg
    },
    // 是否打开麦克风
    voiced: {
      get () {
        return this.$store.state.conference.joinCfData.voiced
      },
      set (val) {
        this.$store.commit('conference/set_joinCfData_voiced', val)
      }
    },
    // 是否打开摄像头
    camera: {
      get () {
        return this.$store.state.conference.joinCfData.camera
      },
      set (val) {
        return this.$store.commit('conference/set_joinCfData_camera', val)
      }
    },
    // 个人设置
    userSettings () {
      return this.$store.state.user.generalSettings
    }
  },
  methods: {
    inputCfNumber () { // 输入会议号
      if (this.cf_code.trim() !== '') {
        this.$store.commit('conference/set_joinCfData_code_error_msg', '')
      }
    },
    joinCf () { // 加入会议
      // 如果会议号为空，则给出错误提示，否则发出加入会议消息
      if (!this.cf_code) {
        this.$store.commit('conference/set_joinCfData_code_error_msg', '请输入会议号')
      } else {
        const settings = {
          voiced: this.voiced,
          camera: this.camera,
          durationOfAttendance: this.$store.state.user.generalSettings.durationOfAttendance
        }
        // 将加入会议设置继承给当前会议
        this.$store.commit('conferenceRoom/set_conferenceSettings', settings)
        sendSock({
          type: '4.1.1',
          body: {
            voiced: this.voiced,
            camera: this.camera,
            cf_join_type: 1,
            cf_id: this.cf_code + ''
          }
        })
        this.$store.commit('socket/set_operationReqId', 'joinConferenceReqId')
      }
    }
  },
  created () {
    // 先重置joinCfData
    this.$store.commit('conference/reset_joinCfData')
    // 一开始将是否打开摄像头/麦克风同步为个人设置的值
    this.$store.commit('conference/set_joinCfData_voiced', this.userSettings.voiced)
    this.$store.commit('conference/set_joinCfData_camera', this.userSettings.camera)
    // 默认隐藏密码输入窗口
    this.$store.commit('common/set_ifShowInputPassword', false)
  }
}
</script>

<style lang="scss" scoped>
.joinCf {
  position: relative;
  .content {
    .key {
      width: 184px;
      text-align: right;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #2e3f64;
      line-height: 20px;
      margin-right: 16px;
    }
    .cfNumber {
      position: relative;
      input {
        width: 400px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #d8dee9;
        border-radius: 3px;
        padding-left: 12px;
      }
      .error{
        border: 1px solid #ff3e6d;
      }
      .errormsg{
        position: absolute;
        top: 45px;
        left: 200px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangTC, PingFangTC-Regular;
        font-weight: 400;
        text-align: left;
        color: #ff3e6d;
        line-height: 17px;
      }
    }
    .joinCfSetting {
      margin-top: 32px;
      .item {
        margin-bottom: 24px;
        .valuetext {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #0D172C;
          margin-left: 12px;
        }
      }
    }
  }
  .joinBtn{
    position: absolute;
    bottom: 36px;
    left: 200px;
    width: 200px;
    height: 40px;
    background: linear-gradient(316deg,#4a53ef, #6971fe 100%);
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #ffffff;
  }
}
</style>
